<template>
	<div class="mpvue-picker">
		<div :class="{'pickerMask':showPicker}"  @click="maskClick" catchtouchmove="true"></div>
		<div class="mpvue-picker-content " :class="{'mpvue-picker-view-show':showPicker}">
			<div class="mpvue-picker__hd" catchtouchmove="true">
				<div class="mpvue-picker__action" @click="pickerCancel">取消</div>
				<div class="mpvue-picker__action" :style="{color:themeColor}" @click="pickerConfirm">确定</div>
			</div>
			<picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChange">
				<block>
					<picker-view-column>
						<div class="picker-item" v-for="(item,index) in provinceDataList" :key="index">{{item.label}}</div>
					</picker-view-column>
					<picker-view-column>
						<div class="picker-item" v-for="(item,index) in cityDataList" :key="index">{{item.label}}</div>
					</picker-view-column>
					<picker-view-column>
						<div class="picker-item" v-for="(item,index) in areaDataList" :key="index">{{item.label}}</div>
					</picker-view-column>
				</block>
			</picker-view>
		</div>
	</div>
</template>

<script>
	import {provinceData,shanghaiData} from '@/common/pcityData.js'
	import {allcityData} from '@/common/allcityData.js'
	/**
	 * 三级城市联动的组件
	 * @property {String} themeColor 主题色
	 * @property {Array} pickerValueDefault 弹出时默认显示的省，市，区
	 */
	export default {
		data() {
			return {
				pickerValue: [0, 0, 0],
				provinceDataList: [],
				cityDataList: [],
				areaDataList: [],
				savecityData: [],
				saveareaData: [],
				/* 是否显示控件 */
				showPicker: true,
				idArr: []

			};
		},
		created() {
			this.init()
		},
		props: {
			/* 默认值 */
			pickerValueDefault: {
				type: Array,
				default () {
					return ['', '', '']
				}
			},
			/* 主题色 */
			themeColor: String,
			// provinceData: Array,
			jsonPath: {
				type: String,
				default: null
			},
			cityFilter: {
				type: String,
				default: ''
			},
		},
		watch: {
			pickerValueDefault() {
				this.init();
			}
		},
		methods: {
			init() {
				if (this.cityFilter) {
					this.provinceDataList = provinceData.filter(item => {
						return item.id == this.cityFilter
					})
				} else{
					this.provinceDataList = provinceData
				}
				this.provinceDataList.forEach(province => {
					province.value = province.id;
					province.label = province.name;
					this.savecityData.push(province.children)
					let arr=[]
					province.children.forEach(city => {
						city.value = city.id;
						city.label = city.name;
						arr.push(city.children)
						city.children.forEach(area=>{
							area.value = area.id;
							area.label = area.name;
						})
					})
					this.saveareaData.push(arr)
				})
				// this.provinceDataList = provinceData;
				// this.savecityData=cityData;
				// this.saveareaData=areaData;
				this.cityDataList = this.savecityData[0];
				this.areaDataList=this.saveareaData[0][0]
				// this.cityDataList = this.savecityData[changePickerValue[0]];
				// this.areaDataList = this.saveareaData[changePickerValue[0]][0];
				// changePickerValue[1] = 0;
				// changePickerValue[2] = 0;
				// if (this.jsonPath) {
				// 	this.$store.dispatch(this.jsonPath, {
				// 		getRegionType: 1,
				// 		lastVer: 0
				// 	}).then(res => {
				// 		if (res.reqResult.code === 1) {
				// 			var zones_tree = res.data.regionTree.children
				// 			if (this.cityFilter) {
				// 				zones_tree = res.data.regionTree.children.filter(item => {
				// 					return item.id == this.cityFilter
				// 				})
				// 			}

				// 			this.provinceDataList = zones_tree;


				// 			this.cityDataList = this.provinceDataList[0].children;

				// 			this.areaDataList = this.cityDataList[0].children;


				// 			this.provinceDataList.forEach(province => {
				// 				province.value = province.id;
				// 				province.label = province.name;
				// 				this.savecityData.push(province.children)
				// 				let arr=[]
				// 				province.children.forEach(city => {
				// 					city.value = city.id;
				// 					city.label = city.name;
				// 					arr.push(city.children)
				// 					city.children.forEach(area=>{
				// 						area.value = area.id;
				// 						area.label = area.name;
				// 					})
				// 				})
				// 				this.saveareaData.push(arr)
				// 			})
							

				// 		}
				// 	})
				// }else{
				// 	this.provinceDataList = provinceData;
				// 	this.savecityData=cityData;
				// 	this.saveareaData=areaData;
				// 	this.cityDataList = this.savecityData[0];
				// 	this.areaDataList=this.saveareaData[0][0]
					
				// }
			},
			show() {
				setTimeout(() => {
					this.showPicker = true;
				}, 0);
			},
			// 返显
			showDefaultValue(pickerValueDefault) {
				setTimeout(()=>{
					if(pickerValueDefault[2]){
						this.provinceDataList.forEach((province,indp)=>{
							if(pickerValueDefault[0].indexOf(province.value)==0 ){
								this.cityDataList=this.savecityData[indp];
								this.pickerValue[0]=indp;
								this.cityDataList.forEach((city,indc)=>{
									if(pickerValueDefault[1].indexOf(city.value)==0 ){
										this.areaDataList=this.saveareaData[indp][indc];
										this.pickerValue[1]=indc;
										this.areaDataList.forEach((area,inda)=>{
											if(pickerValueDefault[2].indexOf(area.value)==0 ){
												this.pickerValue[2]=inda;
											}
										})
									}
								})
							}
						})
						this._$emit('onConfirm');
					}
				},10)
				
			},
			maskClick() {
				this.pickerCancel();
			},
			pickerCancel() {
				this.showPicker = false;
				this._$emit('onCancel');
			},
			pickerConfirm(e) {
				this.showPicker = false;
				this._$emit('onConfirm');
			},
			// handPickValueDefault() {
			//   if (this.pickerValueDefault !== [0, 0, 0]) {
			//     if (this.pickerValueDefault[0] > provinceData.length - 1) {
			//       this.pickerValueDefault[0] = provinceData.length - 1;
			//     }
			//     if (this.pickerValueDefault[1] > cityData[this.pickerValueDefault[0]].length - 1) {
			//       this.pickerValueDefault[1] = cityData[this.pickerValueDefault[0]].length - 1;
			//     }
			//     if (this.pickerValueDefault[2] > areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]].length - 1) {
			//       this.pickerValueDefault[2] = areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]].length - 1;
			//     }
			//   }
			// },
			pickerChange(e) {
				let changePickerValue = e.mp.detail.value;
				if (this.pickerValue[0] !== changePickerValue[0]) {
					// 第一级发生滚动
					this.cityDataList = this.savecityData[changePickerValue[0]];
					this.areaDataList = this.saveareaData[changePickerValue[0]][0];
					changePickerValue[1] = 0;
					changePickerValue[2] = 0;
				} else if (this.pickerValue[1] !== changePickerValue[1]) {
					// 第二级滚动
					this.areaDataList = this.saveareaData[changePickerValue[0]][changePickerValue[1]];
					changePickerValue[2] = 0;
				}
				this.pickerValue = changePickerValue;
				this._$emit('onChange');
			},
			_$emit(emitName) {
				let pickObj = {
					value: this._getLabel(),
					id: this.idArr
				};
				this.$emit(emitName, pickObj);
			},
			_getLabel() {
				let pcikerLabel =
					this.provinceDataList[this.pickerValue[0]].label +
					'-' +
					this.cityDataList[this.pickerValue[1]].label +
					'-' +
					this.areaDataList[this.pickerValue[2]].label;
				this.idArr = [ 
					this.provinceDataList[this.pickerValue[0]].value, 
					this.cityDataList[this.pickerValue[1]].value, 
					this.areaDataList[this.pickerValue[2]].value
					]
					// if(!this.jsonPath){
					// 	this.idArr[0]=this.idArr[0]+'0000';
					// 	this.idArr[1]=this.idArr[1]+'00';
					// }
				return pcikerLabel;
			}
		}
	};
</script>

<style>
	.pickerMask {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background-color: #dedede;
		opacity: 0.6;
	}

	.mpvue-picker-content {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 3000;
	}

	.mpvue-picker-view-show {
		transform: translateY(0);
	}

	.mpvue-picker__hd {
		display: flex;
		padding: 9px 15px;
		background-color: #fff;
		position: relative;
		text-align: center;
		font-size: 17px;
	}

	.mpvue-picker__hd:after {
		content: ' ';
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #e5e5e5;
		color: #e5e5e5;
		transform-origin: 0 100%;
		transform: scaleY(0.5);
	}

	.mpvue-picker__action {
		display: block;
		flex: 1;
		color: #0366D6;
	}

	.mpvue-picker__action:first-child {
		text-align: left;
		color: #888;
	}

	.mpvue-picker__action:last-child {
		text-align: right;
	}

	.picker-item {
		text-align: center;
		line-height: 40px;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 16px;
	}

	.mpvue-picker-view {
		position: relative;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 238px;
		background-color: #dedede;
	}
</style>